<style lang="less">
    @import './VTable.less';
</style>

<template>
    <div class="VTable">
        <Row>
            <Col>
                <Table :columns="init.cols" stripe ref="selection" @on-sort-change="toChangeSort"
                       no-data-text="<i class='iconfont finleanCloud-wushuju'></i><p class='noData'>无数据</p>"
                       @on-selection-change="onSelect" :data="tableData" :loading='showLoading'></Table>
            </Col>
        </Row>
        <br>
        <Row type="flex" justify="space-between" v-if="pages">
            <Col style="color: #5c92e8;height: 32px;line-height: 32px;">
                <span>共 {{ totleItems }} 条</span>
            </Col>
            <Col>
                <Page :total="totalPage"
                      placement="top"
                      :current="currentPage" :page-size='numPerPage' show-sizer
                      show-elevator
                      :page-size-opts="pageSizeOpts" @on-change='changePage'
                      @on-page-size-change="changePageNum"></Page>
            </Col>
        </Row>
    </div>
</template>

<script>
    /**
     * 2018.2.4
     * @author TANGiMING
     * <VTable></VTable>
     * @description 一个表格+分页组件，在组件上使用:init="Object"来进行表格初始化
     * @event @changed  选填，表格渲染后触发的事件
     * @prop {Boolean} pages 选填，是否需要分页,默认为true
     * 以下参数为Object中的配置项
     * @prop {String} url 必填，API方法名,表格会自动发送请求并自动渲染,例如:'fetchINSFOrderList'
     * @prop {Array} cols 必填，表头，用法和iview的表格一致，可以使用render函数
     * @prop {Object} defaultValue  选填，为表格开始渲染时需要传递的默认值（除了Page和rows之外的其他值）
     * @prop {Object} filt 选填，需要主动更新表格时使用，会带入filt的属性进行请求，使用watch监听
     **/
    /*
    * 解释一下defaultValue和filt的区别：
    * defaultValue为从第一次开始，每一次要发请求更新表格时需要带上的参数，例：pageSize（已经做过封装，此参数不需要做传递）
    * 再比如，在先进行查询后进行翻页，因为翻页的内容是查询结果，所以翻页也需要带上查询条件，故需要使用defaultValue；
    *
    * filt为手动更新表格，类似于update的效果，由watch监听；
    * ================Demo============================
    * let obj = {}//假如这是筛选条件；
    * 开始手动更新表格
    * this.filt = obj;//这是错误的用法，这样会造成是会触发一次，当带条件进行翻页时，可能第二次会造成不会更新
    * 正确的用法
    * this.defaultValue = obj;
    * this.filt = {...defaultValue};
    * */
    import api from '../../api/api';
    import codeManage from '@/api/statusCodeManage';
    import dateFmt from '@/tool/date';

    export default {
        name: 'VTable',
        props: ['init', 'pages', 'filt', 'defaultValue'],
        data() {
            return {
                tableData: [],
                showLoading: true,
                totleItems: 0,
                totalPage: null, // 总页数
                numPerPage: 20, // 每页显示多少个
                pageSizeOpts: [10, 20],//每页条数切换的配置
                currentPage: 1,// 当前页码,
                auditArr: [],
                sortType: 2
            };
        },
        watch: {
            filt(newVal) {
                this.getData(newVal);
            }
        },
        methods: {
            toChangeSort(val) {
                //排序功能，点击排序按钮时触发
                let toSort = {
                    ...this.defaultValue,
                    numPerPage: this.numPerPage
                };
                toSort.page = this.currentPage;

                this.getData(toSort);
            },
            onSelect(selection, row) {
                //批量操作
                let arr = [];
                selection.forEach(val => {
                    arr.push(val);
                });
                this.$emit('selectArr', arr);
            },
            getData(params) {
                //if api is undefined
                if (!this.init.url) {
                    throw ('Please set property "url" as interface url ');
                }
                //open loading
                this.showLoading = true;
                //if params is not a Object
                typeof params != 'object' && (params = {});
                //if params is an empty Object or no pageNo
                if (JSON.stringify(params) === '{}') {
                    // 判读空对象或对象里面没有传page和rows时
                    params.pageNo = 1;
                }
                //main function
                let _url = this.init.url.split('.');
                api[_url[0]][_url[1]]({...params}).then(
                    res => {
                        if(res.data == undefined){
                            this.showLoading = false;
                            this.tableData = [];
                            this.currentPage = 1;
                            this.totleItems = 0;
                            return false;
                        }
                        this.totalPage = res.data.totalCount;
                        this.pageSize = res.data.numPerPage;
                        res.data.currentPage === 0 ? this.currentPage = 1 : this.currentPage = res.data.currentPage;
                        if(res.data.recordList){
                            this.tableData = res.data.recordList;
                        }else{
                            this.tableData = res.data;
                        }

                        this.showLoading = false;
                        this.totleItems = res.data.totalCount;
                        this.$emit('changed', res.data.numPerPage, res.data);
                    },
                    err => {
                        codeManage.showTipOfStatuCode(err, this);
                        this.showLoading = false;
                    }
                );
            },
            changePage(currpage) {
                // 点击翻页和直接跳转页
                let changePage = {
                    ...this.defaultValue,
                    pageSize: this.numPerPage
                };
                changePage.pageNo = currpage;
//				changePage.sortType=this.sortType;
                this.getData(changePage);
            },
            changePageNum(num) {
                // 改变每页显示多少个
                this.numPerPage = num;
                let showRows = {
                    ...this.defaultValue,
                    pageNo: 1,
                    pageSize: num
                };
//				showRows.sortType=this.sortType;
                this.getData(showRows);
            }
        },
        mounted() {
            if (this.pages == undefined) {
                this.pages = true;
            }
            let defaultVal = this.defaultValue;
            this.getData(defaultVal);
        }
    };
</script>
